<template>
    <view class="report-container">
        <view id="title">
            <img src="@/static/images/title.png" class="img" />
        </view>
        <view class="grade-box">
            <view class="grade">
                {{ zonghe_grade }}
            </view>
            <view class="desc">你的评分</view>
        </view>

        <view class="report-section section01">
            <view class="title">评分解读</view>
            <view class="evaluate-box">
                <view class="tag">有效时间至</view>
                <view class="time">{{ endTime }}</view>
            </view>
            <view class="explain">
                <view class="p">评分解读:</view>
                <view class="box">
                    <view class="item">
                        <view class="grade">0-10</view>
                        <view class="desc">极差</view>
                    </view>
                    <view class="item">
                        <view class="grade">10-20</view>
                        <view class="desc">较差</view>
                    </view>
                    <view class="item">
                        <view class="grade">21-55</view>
                        <view class="desc">一般</view>
                    </view>
                    <view class="item">
                        <view class="grade">55-80</view>
                        <view class="desc">良好</view>
                    </view>
                    <view class="item">
                        <view class="grade">80-100</view>
                        <view class="desc">优秀</view>
                    </view>
                </view>
            </view>
            <view class="description">评分仅供参考，此为不安全分数本报告包含身份校验、消费风险，失信等多个维度，是根据网络行为综合评估的，不包含个人隐私爬虫数据</view>
            <view class="tip-pic">
                <img v-if="zonghe_grade <= 20" src="@/static/images/tip-reject.png" class="img" />
                <img v-if="zonghe_grade > 55" src="@/static/images/pass.png" class="img" />
            </view>
        </view>

        <view class="report-section section02">
            <text class="title">信息匹配</text>
            <view class="content">
                <view class="top">
                    <img v-if="sys_eq" src="@/static/images/pp.png" class="img" />
                    <img v-else src="@/static/images/bpp.png" class="img" />
                    <view class="desc">身份证/姓名/手机号{{ sys_eq ? '匹配' : '不匹配' }}</view>
                </view>
                <view class="bottom">
                    <view class="line">
                        <p class="desc">基本信息</p>
                        <p class="info">{{ name }}</p>
                    </view>
                    <view class="line">
                        <p class="desc">身份证号</p>
                        <p class="info">{{ cardNo }}</p>
                    </view>
                    <view class="line">
                        <p class="desc">手机号</p>
                        <p class="info">{{ tel }}</p>
                    </view>
                    <view class="line">
                        <p class="desc">手机号码归属地</p>
                        <p class="info">{{ sys_province }}-{{ sys_city }}</p>
                    </view>
                    <view class="line">
                        <p class="desc">手机号码运营商</p>
                        <p class="info">{{ sys_attribute }}</p>
                    </view>
                    <view class="line">
                        <p class="desc">报告编号</p>
                        <p class="info">{{ orderNo }}</p>
                    </view>
                </view>
            </view>
        </view>

        <view class="report-section section03">
            <text class="title">风险命中</text>
            <view class="content">
                <view class="risk">
                    <view class="left">
                        <view class="box">
                            <view class="line">风险项</view>
                            <view class="line">（{{ mzInfo.length }}项）</view>
                        </view>

                    </view>
                    <view class="right">
                        <view v-for="(item, i) in mzInfo" :key="'Y'+i" class="line">
                            {{ i + 1 + '）' + item.name_rule }}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="report-section section07">
            <text class="title">贷款统计</text>
            <view class="content">
                <view class="bottom">
                    <cc-table :data="data02" />
                    <cc-table :data="data03" />
                    <cc-table :data="data04" />
                    <cc-table :data="data05" />
                </view>
            </view>
            <cc-advice sub="说明" content="命中当前逾期包含了当前还款失败或者扣款失败，并不代表我们有逾期。"></cc-advice>
        </view>

        <view class="report-section section08">
            <text class="title">失信现状</text>
            <view class="content">
                <view class="bottom">
                    <cc-table :data="data06" />
                </view>
            </view>
        </view>

        <view class="reportModel">
            <view class="title">
                <view class="left">自身风险筛查</view>
            </view>
            <view class="risk">
                <view id="echart00" style="width: 100%;height: 180px;"></view>
                <view class="hit">
                    <view class="hitContent">
                        <view>{{ sl_id_allnum }}</view>
                        <view>身份证命中风险/次</view>
                    </view>
                    <view class="hitContent">
                        <view>{{ sl_cell_allnum }}</view>
                        <view>手机号命中风险/次</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="reportModel">
            <view class="title">
                <view class="left">借贷申请数据</view>
            </view>
            <view class="charts" id="mychart" :style="myChartStyle"></view>


            <view class="proposal">
                <view class="proposalTitle">建议</view>
                <view class="proposalDesc">报告检测的是12个月内的申请数据，含同一机构，如果申请过于频繁会对评分有影响，请保持良好的借贷习惯，切勿频繁申请。</view>
            </view>

            <view class="searchTime">
                <view :class="[searchTimeIndex == index ? 'timeItem timeItemActive' : 'timeItem']"
                      v-for="(item, i) in searchTime" @click="searchTimeIndex = index +''" :key="'O'+i">
                    {{ item }}
                </view>
            </view>
            <view class="searchContent" v-for="(item,i) in searchpData" :key="'J'+i">
                <view class="searchTitle">
                    {{ item.title }}
                    <view class="searchHr"></view>
                </view>
                <view class="searchp" v-for="(v, i_) in item.item" :key="'K'+i_">
                    <view>{{ v }}</view>
                    <view>
                        {{ searchData[searchTimeIndex][index][i_][0] }}家&nbsp;&nbsp;
                        {{ searchData[searchTimeIndex][index][i_][1] }}次
                    </view>
                </view>
            </view>
            <view class="explain">
                <view class="explainTitle">说明</view>
                <view class="explainDesc">
                    此数据不是借贷数据，是借贷申请机构数（家）和借贷申请次数（次）<br />
                    借贷申请机构数（家）=按身份证号查询命中机构数+按手机号查询命中机构数<br />
                    借贷申请次数（次）=按身份证号查询命中次数+按手机号查询命中次数
                </view>
            </view>

            <view class="reportTable">
                <view class="tableTitle">详细业务类型申请行为（次数）</view>
                <table>
                    <tr>
                        <th></th>
                        <th>近15天</th>
                        <th>近1个月</th>
                        <th>近3个月</th>
                        <th>近6个月</th>
                        <th>近12个月</th>
                    </tr>
                    <tr v-for="(item,i) of tableData1" :key="'L'+i">
                        <td>{{ item.title }}</td>
                        <td>{{ item.d15 }}</td>
                        <td>{{ item.m1 }}</td>
                        <td>{{ item.m3 }}</td>
                        <td>{{ item.m6 }}</td>
                        <td>{{ item.m12 }}</td>
                    </tr>
                    <tr v-if="tableData1.length==0">
                        <td colspan="6">暂无</td>
                    </tr>
                </table>
            </view>

            <view class="explain">
                <view class="explainTitle">说明</view>
                <view class="explainDesc">
                    借贷申请次数=按身份证号查询命中次数+按手机号查询命中次数<br />
                    消费类分期:借贷用于购买消费品并分期偿还的业务<br />
                    现金类分期:支取现金并分期偿还的业务<br />
                    代偿类分期:借贷用于偿还已有借款并分期偿还的业务<br />
                    非银其他:包括担保、信保等。<br />
                </view>
            </view>

            <view class="reportTable">
                <view class="tableTitle">关联机构类型详情</view>
                <table>
                    <tr>
                        <th></th>
                        <th>近15天</th>
                        <th>近1个月</th>
                        <th>近3个月</th>
                        <th>近6个月</th>
                        <th>近12个月</th>
                    </tr>
                    <tr v-for="(item,i) of tableData2" :key="'M'+i">
                        <td>{{ item.title }}</td>
                        <td>{{ item.d15 }}</td>
                        <td>{{ item.m1 }}</td>
                        <td>{{ item.m3 }}</td>
                        <td>{{ item.m6 }}</td>
                        <td>{{ item.m12 }}</td>
                    </tr>
                    <tr v-if="tableData2.length==0">
                        <td colspan="6">暂无</td>
                    </tr>
                </table>
            </view>
            <view class="explain">
                <view class="explainTitle">说明</view>
                <view class="explainDesc">
                    借贷申请机构数=按身份证号查询命中机构数+按手机号查询命中机构数
                </view>
            </view>
        </view>

        <view class="reportModel">
            <view class="title">
                <view class="left">借贷申请时段</view>
            </view>
            <view class="reportTable">
                <table>
                    <tr>
                        <th></th>
                        <th>近15天</th>
                        <th>近1个月</th>
                        <th>近3个月</th>
                        <th>近6个月</th>
                        <th>近12个月</th>
                    </tr>
                    <tr v-for="(item,i) of tableData3" :key="'N'+i">
                        <td>{{ item.title }}</td>
                        <td>{{ item.d15 }}</td>
                        <td>{{ item.m1 }}</td>
                        <td>{{ item.m3 }}</td>
                        <td>{{ item.m6 }}</td>
                        <td>{{ item.m12 }}</td>
                    </tr>
                    <tr v-if="tableData3.length==0">
                        <td colspan="6">暂无</td>
                    </tr>
                </table>
            </view>
            <view class="explain">
                <view class="explainTitle">说明</view>
                <view class="explainDesc">
                    借贷申请机构数=按身份证号查询命中机构数+按手机号查询命中机构数
                </view>
            </view>
        </view>

        <view class="report-section section09">
            <text class="title">履约表现</text>
            <view class="content">
                <view class="content-item">
                    <view class="top">
                        履约表现
                    </view>
                    <view>
                        <view class="bottom-item">
                            <view class="left">消费总机构数</view>
                            <view class="right">{{ dataLybx[0] }}</view>
                        </view>
                        <view class="bottom-item">
                            <view class="left">消费已结清机构数</view>
                            <view class="right">{{ dataLybx[1] }}</view>
                        </view>
                    </view>
                </view>

                <view class="content-item">
                    <view class="top">
                        <view class="p">履约现状</view>
                    </view>
                    <view>
                        <view class="bottom-item">
                            <view class="left">当前是否履约失败</view>
                            <view class="right">{{ dataLybx[2] }}</view>
                        </view>
                        <view class="bottom-item">
                            <view class="left">当前履约失败机构数</view>
                            <view class="right">{{ dataLybx[3] }}</view>
                        </view>
                    </view>
                </view>

                <view class="content-item">
                    <view class="top">
                        <view class="p">交互行为</view>
                    </view>
                    <view>
                        <view class="bottom-item">
                            <view class="left">交互失败百分比</view>
                            <view class="right">{{ dataLybx[4] }}</view>
                        </view>
                        <view class="bottom-item">
                            <view class="left">交互成功百分比</view>
                            <view class="right">{{ dataLybx[5] }}</view>
                        </view>
                    </view>
                </view>

                <view class="content-item">
                    <view class="top">
                        <view class="p">新增约定笔数（近半年）</view>
                    </view>
                    <view>
                        <view class="bottom-item">
                            <view class="left">30天内新增消费次数统计</view>
                            <view class="right">{{ dataLybx[6] }}</view>
                        </view>
                        <view class="bottom-item">
                            <view class="left">90天内新增消费次数统计</view>
                            <view class="right">{{ dataLybx[7] }}</view>
                        </view>
                        <view class="bottom-item">
                            <view class="left">半年内新增消费次数统计</view>
                            <view class="right">{{ dataLybx[8] }}</view>
                        </view>
                    </view>
                </view>

                <view class="content-item">
                    <view class="top">
                        <view class="p">贷款机构数</view>
                    </view>
                    <view class="bottom">
                        <view id="echart02" style="width: 100%;height: 126.0px;">
                        </view>
                    </view>
                </view>

                <view class="content-item">
                    <view class="top">
                        <view class="p">还款成功数</view>
                    </view>
                    <view class="bottom">
                        <view id="echart03" style="width: 100%;height: 160.0px;"></view>
                    </view>
                </view>
            </view>
        </view>

        <view class="report-section section10">
            <text class="title">行为探针</text>

            <view class="content">
                <cc-table :data="data10" />
            </view>
        </view>

        <view class="report-section section11">
            <view class="title">特殊名单/司法汇总</view>
            <view class="content">
                <view class="content-item">
                    <view>网络诈骗</view>
                    <view>{{ hit ? '命中' : '未命中' }}</view>
                </view>

                <table>
                    <tr>
                        <th>法院公告</th>
                        <th>涉案信息</th>
                        <th>案件流程</th>
                    </tr>
                    <tr>
                        <td>{{getAJnum(detail1.civil)}}</td>
                        <td>{{getAJnum(detail1.criminal)}}</td>
                        <td>{{getAJnum(detail1.administrative)}}</td>
                    </tr>
                    <tr>
                        <th>执行公告</th>
                        <th>限制高消费</th>
                        <th>曝光台</th>
                    </tr>
                    <tr>
                        <td>{{getAJnum(detail1.implement)}}</td>
                        <td>{{getAJnum(detail1.bankrupt)}}</td>
                        <td>{{getAJnum(detail1.preservation)}}</td>
                    </tr>
                </table>
            </view>
        </view>
        <view class="report-section">
            <view class="title">法院公告{{ detail1.civil.cases ? '' : '（暂无）' }}</view>
            <uni-collapse-item v-if="detail1.civil.cases" v-for="(item, index) in detail1.civil.cases" :open="index==0"
                               class="xm">

                <template v-slot:title>
                    <view class="ajbt">
                        <span>案号</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                </template>
                <view>
                    <view class="ajbt">
                        <span>案件类型</span>
                        <span>{{ item.n_ajlx }}</span>
                    </view>
                    <view class="ajbt">
                        <span>法院</span>
                        <span>{{ item.n_jbfy }}</span>
                    </view>
                    <view class="ajbt ">
                        <span>诉讼身份</span>
                        <span>{{ item.n_ssdw }}</span>
                    </view>
                    <view class="ajbt">
                        <span>立案时间</span>
                        <span>{{ item.d_larq  }}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案时间</span>
                        <span>{{ item.d_jarq}}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案方式</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                    <view class="ajbt">
                        <span>执行标的金额</span>
                        <span>{{ item.n_sqzxbdje}}</span>
                    </view>
                    <view class="ajbt last">
                        <span>判决结果</span>
                        <span>{{ item.n_jafs }}</span>
                    </view>

                </view>
            </uni-collapse-item>
        </view>

        <view class="report-section">
            <view class="title">涉案信息{{ detail1.criminal.cases ? '' : '（暂无）' }}</view>
            <uni-collapse-item v-if="detail1.criminal.cases" v-for="(item, index) in detail1.criminal.cases"
                               :open="index==0" class="xm">
                <template v-slot:title>
                    <view class="ajbt">
                        <span>案号</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                </template>
                <view>
                    <view class="ajbt">
                        <span>案件类型</span>
                        <span>{{ item.n_ajlx }}</span>
                    </view>
                    <view class="ajbt">
                        <span>法院</span>
                        <span>{{ item.n_jbfy }}</span>
                    </view>
                    <view class="ajbt ">
                        <span>诉讼身份</span>
                        <span>{{ item.n_ssdw }}</span>
                    </view>
                    <view class="ajbt">
                        <span>立案时间</span>
                        <span>{{ item.d_larq  }}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案时间</span>
                        <span>{{ item.d_jarq}}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案方式</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                    <view class="ajbt">
                        <span>执行标的金额</span>
                        <span>{{ item.n_sqzxbdje}}</span>
                    </view>
                    <view class="ajbt last">
                        <span>判决结果</span>
                        <span>{{ item.n_jafs }}</span>
                    </view>
                </view>
            </uni-collapse-item>
        </view>

        <view class="report-section">
            <view class="title">案件流程{{ detail1.administrative.cases ? '' : '（暂无）' }}</view>
            <uni-collapse-item v-if="detail1.administrative.cases" v-for="(item, index) in detail1.administrative.cases"
                               :open="index==0" class="xm">
                <template v-slot:title>
                    <view class="ajbt">
                        <span>案号</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                </template>
                <view>
                    <view class="ajbt">
                        <span>案件类型</span>
                        <span>{{ item.n_ajlx }}</span>
                    </view>
                    <view class="ajbt">
                        <span>法院</span>
                        <span>{{ item.n_jbfy }}</span>
                    </view>
                    <view class="ajbt ">
                        <span>诉讼身份</span>
                        <span>{{ item.n_ssdw }}</span>
                    </view>
                    <view class="ajbt">
                        <span>立案时间</span>
                        <span>{{ item.d_larq  }}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案时间</span>
                        <span>{{ item.d_jarq}}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案方式</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                    <view class="ajbt">
                        <span>执行标的金额</span>
                        <span>{{ item.n_sqzxbdje}}</span>
                    </view>
                    <view class="ajbt last">
                        <span>判决结果</span>
                        <span>{{ item.n_jafs }}</span>
                    </view>
                </view>
            </uni-collapse-item>
        </view>


        <view class="report-section">
            <view class="title">案件流程{{ detail1.implement.cases ? '' : '（暂无）' }}</view>
            <uni-collapse-item v-if="detail1.implement.cases" v-for="(item, index) in detail1.implement.cases"
                               :open="index==0" class="xm">
                <template v-slot:title>
                    <view class="ajbt">
                        <span>案号</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                </template>
                <view>
                    <view class="ajbt">
                        <span>案件类型</span>
                        <span>{{ item.n_ajlx }}</span>
                    </view>
                    <view class="ajbt">
                        <span>法院</span>
                        <span>{{ item.n_jbfy }}</span>
                    </view>
                    <view class="ajbt ">
                        <span>诉讼身份</span>
                        <span>{{ item.n_ssdw }}</span>
                    </view>
                    <view class="ajbt">
                        <span>立案时间</span>
                        <span>{{ item.d_larq  }}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案时间</span>
                        <span>{{ item.d_jarq}}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案方式</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                    <view class="ajbt">
                        <span>执行标的金额</span>
                        <span>{{ item.n_sqzxbdje}}</span>
                    </view>
                    <view class="ajbt last">
                        <span>判决结果</span>
                        <span>{{ item.n_jafs }}</span>
                    </view>
                </view>
            </uni-collapse-item>
        </view>


        <view class="report-section">
            <view class="title">限制高消费{{ detail1.bankrupt.cases ? '' : '（暂无）' }}</view>
            <uni-collapse-item v-if="detail1.bankrupt.cases" v-for="(item, index) in detail1.bankrupt.cases"
                               :open="index==0" class="xm">
                <template v-slot:title>
                    <view class="ajbt">
                        <span>案号</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                </template>
                <view>
                    <view class="ajbt">
                        <span>案件类型</span>
                        <span>{{ item.n_ajlx }}</span>
                    </view>
                    <view class="ajbt">
                        <span>法院</span>
                        <span>{{ item.n_jbfy }}</span>
                    </view>
                    <view class="ajbt ">
                        <span>诉讼身份</span>
                        <span>{{ item.n_ssdw }}</span>
                    </view>
                    <view class="ajbt">
                        <span>立案时间</span>
                        <span>{{ item.d_larq  }}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案时间</span>
                        <span>{{ item.d_jarq}}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案方式</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                    <view class="ajbt">
                        <span>执行标的金额</span>
                        <span>{{ item.n_sqzxbdje}}</span>
                    </view>
                    <view class="ajbt last">
                        <span>判决结果</span>
                        <span>{{ item.n_jafs }}</span>
                    </view>
                </view>
            </uni-collapse-item>
        </view>

        <view class="report-section">
            <view class="title">曝光台{{ detail1.preservation.cases ? '' : '（暂无）' }}</view>
            <uni-collapse-item v-if="detail1.preservation.cases" v-for="(item, index) in detail1.preservation.cases"
                               :open="index==0" class="xm">
                <template v-slot:title>
                    <view class="ajbt">
                        <span>案号</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                </template>
                <view>
                    <view class="ajbt">
                        <span>案件类型</span>
                        <span>{{ item.n_ajlx }}</span>
                    </view>
                    <view class="ajbt">
                        <span>法院</span>
                        <span>{{ item.n_jbfy }}</span>
                    </view>
                    <view class="ajbt ">
                        <span>诉讼身份</span>
                        <span>{{ item.n_ssdw }}</span>
                    </view>
                    <view class="ajbt">
                        <span>立案时间</span>
                        <span>{{ item.d_larq  }}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案时间</span>
                        <span>{{ item.d_jarq}}</span>
                    </view>
                    <view class="ajbt">
                        <span>结案方式</span>
                        <span>{{ item.c_ah }}</span>
                    </view>
                    <view class="ajbt">
                        <span>执行标的金额</span>
                        <span>{{ item.n_sqzxbdje}}</span>
                    </view>
                    <view class="ajbt last">
                        <span>判决结果</span>
                        <span>{{ item.n_jafs }}</span>
                    </view>
                </view>
            </uni-collapse-item>
        </view>

        <cc-advice sub="说明"
                   content="失信被执行人，是指有履行能力但是逃避执行、规避执行、抗拒执行的被执行人，俗称老赖。法院被执行人是指在法定的上诉期满后，或终审判决作出后，拒不履行法院判决或仲裁裁决的当事人。"></cc-advice>

        <cc-advice content="如有执行请立即履行生效法律文书确定的义务，向相关法院申请移出失信被执行人和法院被执行人名单。"></cc-advice>

        <view class="section13">
            <view class="section-item">
                <view class="p">提高信用评分消除风险的建议</view>
                <view class="content">
                    <view class="line">
                        1. 信用卡一年内申请不超过6次，含同一机构，网贷3个月内申请不超过20次，控制申请频率；
                    </view>
                    <view class="line">
                        2. 如有逾期或被执行等不良记录，保持信用良好1-2年，记录可以滚动覆盖过去。
                    </view>

                    <view class="line">
                        3. 保持良好的接待习惯，切勿频繁申请，拒绝不明平台的审核邀请。
                    </view>
                    <view class="line">
                        4. 减少和网贷黑名单的这类人群的联系，提高自己朋友圈优良信用人群比例。
                    </view>
                </view>
            </view>

            <view class="section-item">
                <view class="p">大数据报告说明</view>
                <view class="content">
                    报告本人授权查询，本报告包含身份校验，借贷风险、失信等多个维度。是根据网络行为综合评估的，不包含个人隐私爬虫数据。只做大数据信息的获取及分析，不对原始数据做任何修改，仅供参考使用。如果你对报告有异议，出于合作平台数据隐私的保护，平台不做任何解释。
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        query
    } from '@/api/jinjian.js'

    import {
        disposeEl,
        disposeSlc,
        disposeAls,
        searchNameData,
        searchData
    } from '@/utils/duotouDis'

    import {
        bdpTemInfo
    } from '@/utils/temInfo'

    import * as echarts from "echarts"
    import {
        data02,
        data03,
        data04,
        data05,
        data06,
        data10,
        dataLybx,
        sxxzRow,
        disEdata,
        e3data,

        dktjRow,

        lybxRow,

        xwtz10Row,

        yhyqqzfx,
        wlqzslfx
    } from '@/utils/poster.js'

    export default {
        name: 'bdp',
        data() {
            return {
                myChartStyle: {
                    width: "100%",
                    height: "400px"
                },

                data02,
                data03,
                data04,
                data05,
                data06,
                dataLybx,
                data10,
                searchData,


                tableData1: [],
                tableData2: [],
                tableData3: [],


                orderNo: '',
                zonghe_grade: 50,
                endTime: '',
                sys_eq: false,

                name: '',
                cardNo: '',
                tel: '',
                sys_province: '',
                sys_city: '',
                sys_attribute: '',


                index: 0,

                mzInfo: [],
                sl_id_allnum: 0,
                sl_cell_allnum: 0,

                searchTimeIndex: 0,
                searchName: ['身份证查询', '手机号查询'],

                searchNameData,

                searchTime: ['近15天', '近1个月', '近3个月', '近6个月', '近12个月'],
                searchpData: [{
                    title: '机构类别统计',
                    item: ['传统银行', '网络零售银行', '非银-p2p机构汇总', '非银-小贷机构汇总', '非银-现金类汇总', '非银-消费类汇总', '非银-代偿类汇总',
                        '非银-其他'
                    ]
                },
                    {
                        title: '申请条件统计',
                        item: ['通过手机号申请', '通过身份证申请']
                    },
                    {
                        title: '持牌类别统计',
                        item: ['持牌小贷', '持牌网络小贷', '持牌消费金融', '持牌汽车金融', '持牌融资租赁']
                    },
                ],

                labels: [],
                ExecutionLimited: {
                    fysx: [],
                    fyxg: []
                },
                yData: [0, 0, 0, 0, 0], //申请次数
                taskDate: [0, 0, 0, 0, 0], //申请机构

                dkjgs: [10, 10, 10],
                hit: null,

                detail1: {
                    civil: {},
                    criminal: {},
                    administrative: {},
                    implement: {},
                    bankrupt: {},
                    preservation: {}
                }
            }
        },
        onLoad(options) {
            this.$modal.loading('获取中....')
            if (options.orderNo) {
                this.orderNo = options.orderNo
                query(this.orderNo).then(res => {
                    this.$modal.closeLoading()
                    if (res.code == 200) {
                        let data = res.data
                        if (data.sjsys.retcode == '4005') {
                            this.zonghe_grade = ''
                            this.$modal.msgLoading('系统异常' + data.sjsys.retmsg)
                        } else {
                            this.hanbleData(data)
                        }
                    } else if (res.code == 500) {
                        let this_ = this
                        this.zonghe_grade = ''
                        uni.showModal({
                            title: '提示',
                            content: res.msg,
                            showCancel: false,
                            success: function(res) {
                                this_.to('record')
                            }
                        })
                    } else if (res.code == 601) {
                        this.endTime = res.endTime
                        this.zonghe_grade = ''
                        this.$modal.msgLoading(res.msg)
                    }
                })
            } else {
                this.$nextTick(() => {
                    this.hanbleData(bdpTemInfo)
                    this.$modal.closeLoading()
                })
            }
        },
        methods: {
            getAJnum(data) {
                if ('cases' in data) {
                    return data.cases.length + '条'
                }
                return '未命中（0条）'
            },
            pd(item) {
                if (item && item.n_jafs) {
                    if (item.n_jafs.includes('结案')) {
                        return false
                    } else if (item.n_jafs.includes('终结')) {
                        return false
                    } else if (item.n_jafs.includes('完毕')) {
                        return false
                    } else {
                        return true
                    }
                } else {
                    return false
                }
            },

            hanbleData(data) {
                this.endTime = data.endTime
                this.name = data.name
                this.cardNo = data.cardNo
                this.tel = data.tel
                if (data.labels && data.labels.retdata) {
                    this.label  = data.labels.retdata
                }
                let sjsys = data.sjsys
                if (sjsys.retcode == '000000') {
                    let retdata = sjsys.retdata
                    this.sys_province = retdata.province
                    this.sys_city = retdata.city
                    this.sys_attribute = retdata.attribute
                    this.sys_eq = retdata.checkResult == '0'
                } else {
                    this.$modal.msg(sjsys.retmsg)
                }
                let dttz = data.dttz
                if (dttz.retcode == '000000') {
                    let retdata = dttz.retdata
                    if (retdata.code == '00') {
                        if (retdata.Flag.riskstrategy == '1') {
                            this.zonghe_grade = 100 - parseInt(retdata.Rule.result.final_weight);
                            console.log('--原始分--', this.zonghe_grade)
                            if (this.zonghe_grade > 79 && !this.sys_eq) {
                                this.zonghe_grade = 50
                            }
                            console.log('--计算分--', this.zonghe_grade)
                        }
                        if (retdata.Flag.ruleexecutionlimited == '1') {
                            let r = retdata.Rule.hit_rules.ruleexecutionlimited
                            for (let key in r) {
                                this.mzInfo.push(r[key])
                            }
                        }
                        if (retdata.Flag.rulespeciallist_c == '1') {
                            let r = retdata.Rule.hit_rules.rulespeciallist_c
                            for (let key in r) {
                                this.mzInfo.push(r[key])
                            }
                        }
                        if (retdata.Flag.ruleapplyloan == '1') {
                            let r = retdata.Rule.hit_rules.ruleapplyloan
                            for (let key in r) {
                                this.mzInfo.push(r[key])
                            }
                        }
                        // console.log('--mzInfo--', this.mzInfo)
                        if (retdata.Flag.applyloanstr == '1') {
                            // console.log('--retdata.ApplyLoanStr--', retdata.ApplyLoanStr)
                            let als = disposeAls(retdata.ApplyLoanStr)
                            // console.log('--als--', als)
                            this.yData = als.allnum
                            this.taskDate = als.orgnum

                            this.searchData = als.searchData
                            this.tableData1 = als.tableData1
                            this.tableData2 = als.tableData2
                            this.tableData3 = als.tableData3
                        }
                        if (retdata.Flag.specialList_c == '1') {
                            yhyqqzfx(retdata.SpecialList_c)
                            wlqzslfx(retdata.SpecialList_c)
                            let slc = disposeSlc(retdata.SpecialList_c)
                            this.sl_id_allnum = slc.id_allnum
                            this.sl_cell_allnum = slc.cell_allnum
                            this.searchNameData = slc.searchNameData
                        }
                    } else if (retdata.code == '100002') {
                        // 查询成功，但策略配置里全部子产品均未匹配到结果
                    } else {
                        this.$modal.msg(dttz.retmsg);
                    }
                } else {
                    this.$modal.msg(dttz.retmsg);
                }
                this.initEchart00()
                this.initEchart01()

                let grss = data.grss
                if (grss.retcode == '000000') {
                    const retdata = grss.retdata
                    if (retdata.detail && retdata.detail[0]) {
                        this.detail1 = retdata.detail[0]
                    } else {
                        this.$modal.msg(retdata.messge)
                    }
                } else if (grss.retcode == '4005') {
                    this.$modal.msgLoading('系统异常' + grss.retmsg)
                }
                this.hit = data.hit

                let jxzs = data.jxzs.retdata
                dktjRow(jxzs)
                sxxzRow(jxzs)
                lybxRow(jxzs)
                this.dkjgs = [
                    disEdata(jxzs.xyp_cpl0009),
                    disEdata(jxzs.xyp_cpl0011),
                    disEdata(jxzs.xyp_cpl0012)
                ]
                // console.log('--this.dkjgs--', this.dkjgs)
                e3data[0].value = disEdata(jxzs.xyp_cpl0019)
                e3data[1].value = disEdata(jxzs.xyp_cpl0019)
                e3data[2].value = disEdata(jxzs.xyp_cpl0019)
                e3data[3].value = disEdata(jxzs.xyp_cpl0019)
                // console.log('--e3data--', e3data)
                this.$nextTick(() => {
                    this.initEchart02();
                    this.initEchart03();
                })
                xwtz10Row(jxzs)
            },

            initEchart00() {
                this.$nextTick(() => {
                    const myChart = echarts.init(document.getElementById("echart00"));
                    myChart.setOption({
                        series: [{
                            name: 'Indicator',
                            type: 'gauge',
                            detail: {
                                show: false
                            },
                            data: [{
                                value: this.sl_id_allnum + this.sl_cell_allnum,
                                name: '风险指数（低——>高）',
                                title: {
                                    fontSize: 10
                                }
                            }],
                            center: ["50%", "70%"],
                            radius: "100%",
                            startAngle: 180,
                            endAngle: 0,
                            progress: {
                                itemStyle: {
                                    color: 'rgba(249, 5, 5, 1)'
                                },
                                show: true
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false
                            },
                            title: {
                                show: true
                            },
                            max: 10
                        }]
                    });
                    //随着屏幕大小调节图表
                    window.addEventListener("resize", () => {
                        myChart.resize();
                    })
                })
            },

            initEchart01() {
                const mulColumnZZTData = {
                    xAxis: {
                        data: ['15天', '1个月', '3个月', '6个月', '12个月']
                    },
                    // 图例
                    legend: {
                        data: ["申请次数", "申请机构"],
                        top: "0%"
                    },
                    yAxis: {},
                    series: [{
                        type: "bar", //形状为柱状图
                        data: this.yData,
                        name: "申请次数", // legend属性
                        label: {
                            // 柱状图上方文本标签，默认展示数值信息
                            show: true,
                            position: "top"
                        }
                    },
                        {
                            type: "bar", //形状为柱状图
                            data: this.taskDate,
                            name: "申请机构", // legend属性
                            label: { // 柱状图上方文本标签，默认展示数值信息
                                show: true,
                                position: "top"
                            }
                        }
                    ]
                }
                this.$nextTick(() => {
                    const myChart = echarts.init(document.getElementById("mychart"));
                    myChart.setOption(mulColumnZZTData);
                    //随着屏幕大小调节图表
                    window.addEventListener("resize", () => {
                        myChart.resize();
                    })
                })
            },

            initEchart02() {
                let e = document.getElementById("echart02")
                // console.log(e)
                let echart02 = echarts.init(e);
                let options = {
                    xAxis: {
                        type: "category",
                        data: ['7天', '30天', '90天'],
                        axisLabel: {
                            color: "#9AA5B5",
                            fontSize: "12.0px"
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    tooltip: {
                        trigger: 'axis', // 触发类型，可选 'item' 和 'axis'
                        axisPointer: { // 坐标轴指示器配置
                            type: 'shadow' // 默认为 'line'，可选 'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '10%', // 设置图表内容离左侧的距离
                        right: '10%', // 设置图表内容离右侧的距离
                        top: '10%', // 设置图表内容离顶部的距离（确保不与标题重叠）
                        bottom: '15%' // 设置图表内容离底部的距离
                    },
                    yAxis: {
                        type: "value",
                        interval: 5,
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            color: "#9AA5B5",
                            fontSize: "12.0px"
                        },
                    },
                    series: [{
                        type: "bar", //形状为柱状图
                        data: this.dkjgs,
                        name: "申请机构数", // legend属性

                        stack: "总申请数",
                        label: {
                            // 柱状图上方文本标签，默认展示数值信息
                            show: false,
                            position: "top"
                        },
                        itemStyle: {
                            color: "#3170FF"
                        },
                        barWidth: 20
                    }]
                }
                echart02.setOption(options)
                window.addEventListener("resize", () => {
                    echart02.resize()
                })

            },

            initEchart03() {
                let sum = e3data.reduce((acc, item) => {
                    return acc + item.value
                }, 0)
                let echart03 = echarts.init(document.getElementById("echart03"))
                const options = {
                    color: ['#3B6FF6', '#77CEF0', '#5B3BF6', '#77DEA4'], // 颜色数组，按顺序应用
                    grid: {
                        top: '10%', // 设置图表内容离顶部的距离（确保不与标题重叠）
                        bottom: '15%' // 设置图表内容离底部的距离
                    },
                    legend: {
                        // data:["申请次数","申请机构数"],
                        top: "50",
                        // left:"68",
                        orient: 'horizontal',
                        left: 'right',
                        itemGap: 20,
                        width: "50%",
                        itemWidth: 6,
                        itemHeight: 6,
                        textStyle: {
                            fontWeight: "normal",
                            color: "#9AA5B5",
                            fontsize: "24rpx"
                        },
                        formatter: function(name) {
                            var find = e3data.find(item => item.name === name);
                            if (find) {
                                return `${name}: ${find.value} 笔`
                            }
                            return `${name}`
                        }
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: function(params) {
                            // return `Series: ${params.name}<br/>Category: ${params.value}<br/>Value: ${params.value}`;
                            let rate = ((params.value / sum) * 100).toFixed(2) + "%"
                            return rate
                        }
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        roseType: 'area',
                        radius: ['50%', '90%'], // 设置内外半径，实现环形
                        center: ['20%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false, // 隐藏标签
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: e3data
                    }],
                    graphic: {
                        type: 'text',
                        left: '10%',
                        top: '40%',
                        style: {
                            text: "", // 设置显示的文字内容
                            textAlign: 'center',
                            fill: '#000', // 字体颜色
                            fontSize: 14, // 字体大小
                            fontWeight: 'bold'
                        }
                    }
                }
                echart03.setOption(options)
                window.addEventListener("resize", () => {
                    echart03.resize()
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  .report-container {
    min-height: 100vh;
    background: url("@/static/images/bg.png") no-repeat 0 0, #F5F6FC;
    background-size: contain;
    padding: 15.0px;
    box-sizing: border-box;

    #title {
      width: 100%;
      height: 90.0px;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .grade-box {
      height: 146.0px;
      width: 146.0px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: url("@/static/images/grade.png") no-repeat center center;
      background-size: contain;

      .grade {
        color: #3170FF;
        font-weight: bold;
        font-size: 40.0px;
        margin-top: 39.0px;
      }

      .desc {
        color: #3170FF;
        margin-bottom: 39.0px;
      }
    }

    .report-section {
      margin-top: 15.0px;
      width: 100%;
      min-height: 100.0px;
      background: url("@/static/images/section-bg.png") no-repeat -14.0px 0;
      background-size: 100% auto;
      background-color: #f0f0f0;
      padding: 10.0px;

      box-sizing: border-box;
      background-color: #fff;
      border-radius: 8.0px;

      .title {
        margin-left: 5px;
        color: #fff;
        font-weight: bold;
        font-size: 15.0px;
      }

      table {
        margin-top: 20px;
        width: 100%;
        background-color: #f6f6f6;
        border-radius: 4px;
        border-collapse: collapse;
        font-size: 12px;
        padding: 2px;
        color: #078dff;

        table th,
        td {
          width: 33%;
          border-bottom: 1px solid black;
          border-color: #EBEEF5;
          text-align: center;
        }

        th {
          padding: 8px 4px;
          background-color: #1d98fe24;
        }

        td {
          padding: 8px 4px;
        }
      }
    }

    .section01 {
      background-color: #fff;
      border-radius: 8.0px;
      box-sizing: border-box;
      // padding: 5.0px 16.0px 16.0px;
      position: relative;

      .evaluate-box {
        margin-top: 22.0px;
        display: flex;
        align-items: center;

        .tag {
          color: #3170FF;
          border: 1px solid #3170FF;
          width: 60.0px;
          height: 18.0px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 4px;
          font-size: 10.0px;
        }

        .time {
          color: #94949C;
          font-size: 12.0px;
          margin-left: 3px;
        }
      }

      .explain {
        margin-top: 16.0px;

        .p {
          height: 16.0px;
          line-height: 20.0px;
          color: #646469;
          margin-bottom: 6.0px;
        }

        .box {
          display: flex;
          justify-content: space-between;

          .item {
            width: 57.0px;
            height: 64.0px;
            border-radius: 4px;
            border: 1px solid rgba(49, 112, 255, 0.12);
            background-color: rgba(136, 173, 255, 0.04);
            display: flex;
            flex-direction: column;
            align-items: center;

            .grade {
              color: #001850;
              font-size: 14.0px;
              height: 40.0px;
              line-height: 40.0px;
            }

            .desc {
              background-color: rgba(136, 173, 255, 0.10);
              height: 24.0px;
              width: 100%;
              line-height: 24.0px;
              text-align: center;
              color: rgba(0, 24, 80, .5);
            }
          }
        }
      }

      .description {
        margin-top: 10.0px;
        color: #646469;
        font-size: 12.0px;
        line-height: 22.0px;
      }

      .tip-pic {
        position: absolute;
        width: 75.0px;
        height: 75.0px;
        right: 37.0px;
        top: 56.0px;

        .img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .section02 {
      padding-bottom: 12.0px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 8.0px;
      // padding: 5.0px 16.0px 16.0px;

      .content {
        .top {
          padding: 16.0px 0;
          box-sizing: border-box;
          height: 107.0px;
          border-bottom: 1px solid rgba(49, 112, 255, 0.20);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .img {
            width: 60.0px;
            height: 47.0px;
          }

          .desc {
            font-size: 14.0px;
            color: #3D3D41;
          }
        }

        .bottom {
          padding-top: 2px;

          .line {
            width: 100%;
            height: 36.0px;
            display: flex;
            align-items: center;
            font-size: 13.0px;
            justify-content: space-between;

            .desc {
              color: #94949C;
            }

            .info {
              max-width: 135.0px;
              color: #3D3D41;
              word-wrap: break-word;
              p-align: right;
            }
          }
        }
      }
    }

    .section03 {
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 8.0px;

      .content {
        margin-top: 10px;
        box-sizing: border-box;
        border-radius: 8.0px;

        .risk {
          display: flex;
          justify-content: space-between;

          .left {
            width: 25%;
            // height: 112.0px;
            border: 1px solid rgba(49, 112, 255, 0.12);
            color: #001850;
            background-color: rgba(136, 173, 255, 0.10);
            font-size: 12.0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .box {
              // width: 43.0px;
              // height: 40.0px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;

            }
          }

          .right {
            width: 72%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .line {
              color: #94949C;
              height: 30.0px;
              border: 1px solid rgba(49, 112, 255, 0.12);
              line-height: 30.0px;
              padding-left: 10.0px;
            }
          }
        }
      }
    }

    .section07 {
      .content {
        .bottom {
          margin-top: 10.0px;
        }

        .top {
          display: flex;
          align-items: center;

          .block {
            width: 2px;
            height: 12.0px;
            background-color: #3170FF;
            margin-right: 4px;
          }

          .p {
            color: #001850;
          }
        }

      }
    }

    .section08 {
      .content {
        .bottom {
          margin-top: 10.0px;
        }

        .top {
          display: flex;
          align-items: center;

          .block {
            width: 2px;
            height: 12.0px;
            background-color: #3170FF;
            margin-right: 4px;
          }

          .p {
            color: #001850;
          }
        }
      }
    }

    .section09 {
      .content {
        padding: 10.0px;
        box-sizing: border-box;

        // background-color: #aaffff;

        .content-item {
          margin-bottom: 10px;
          padding-bottom: 5px;

          border-bottom: 1px solid rgba(49, 112, 255, 0.20);

          .top {
            width: max-content;
            background: linear-gradient(to top, #93B4FF 0%, #9FD2FF 30%, transparent 30%, transparent 100%);
            color: #3D3D41;
            font-size: 16.0px;
            font-weight: bold;
          }

          .bottom-item {
            display: flex;
            justify-content: space-between;
            margin-top: 10.0px;
            font-size: 13.0px;
            color: #3D3D41;

            .right {
              color: #FF8326;
            }
          }
        }
      }
    }

    .section11 {
      .content {
        padding: 10.0px;

        .content-item {
          margin-top: 10.0px;
          font-size: 15.0px;
          color: #646469;
          height: 18.0px;

          display: flex;
          justify-content: space-between;
          align-items: center;

          &:last-of-type {
            margin-bottom: 0;
          }

          .right {
            color: #E40032;
          }
        }
      }
    }

    .section13 {
      margin-top: 15.0px;
      border-radius: 8.0px;
      background: linear-gradient(to bottom, rgba(49, 112, 255, 0.15) 0%, rgba(197, 215, 255, 0) 30%, rgba(197, 215, 255, 0) 30%, #fff 100%);
      padding: 10.0px;
      box-sizing: border-box;

      .section-item {
        .p {
          width: max-content;
          color: #3D3D41;
          font-size: 16.0px;
          font-weight: bold;
          height: 24.0px;
          display: grid;
          align-items: end;
          background: linear-gradient(to top, #93B4FF 0%, #9FD2FF 30%, transparent 30%, transparent 100%);
        }

        .content {
          padding: 10.0px 0 15.0px;
          box-sizing: border-box;
          border-bottom: 1px solid rgba(49, 112, 255, 0.20);
          color: #3D3D41;
          font-size: 14.0px;

          .line {
            line-height: 28.0px;
            font-size: 14.0px;
          }
        }
      }

      .section-item:last-of-type .content {
        border-bottom: none;
      }
    }
  }

  .reportModel {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    background: #feffff;
    border-radius: 8px;
    margin-top: 10px;

    table {
      background-color: #f6f6f6;
      border-radius: 4px;
      border-collapse: collapse;
      font-size: 12px;
      padding: 2px;
      color: #078dff;

      table th,
      td {
        border-bottom: 1px solid black;
        border-color: #EBEEF5;
        text-align: center;
      }

      th {
        background-color: #1d98fe24;
      }

      td {
        padding: 8px 4px;
      }

    }
  }

  .reportModel .title {
    width: 100%;
    display: flex;
  }

  .reportModel .title .left {
    background-image: url();
    height: 40px;
    font-size: 15px;
    color: #00568b;
    background-size: cover;
    width: 123px;
    padding-left: 15px;
    box-sizing: border-box;
    font-weight: 600;
    line-height: 45px;
  }

  .reportModel .charts {
    width: 100%;
    margin-top: 10px;
  }

  .reportModel .explain {
    margin: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
  }

  .reportModel .explain .explainTitle {
    color: white;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 109, 0, 0.6) 100%);
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 17px;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
  }

  .reportModel .explain .explainDesc {
    background: rgba(255, 235, 214, 0.45);
    color: #DF6B14;
    padding: 8px;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
    line-height: 24px;
  }

  .reportModel .proposal {
    margin: 10px 10px 0;
    background-color: rgb(231, 245, 251);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
  }

  .reportModel .proposal .proposalTitle {
    color: rgb(7, 141, 255);
    background: linear-gradient(90deg, rgb(188, 237, 255) 0%, rgba(238, 238, 238, 0) 100%);
    padding: 5px 10px;
    box-sizing: border-box;
    font-size: 17px;
    font-weight: 600;
    border-radius: 5px 5px 0 0;
  }

  .reportModel .proposal .proposalDesc {
    background-color: rgb(231, 245, 251);
    color: rgb(47, 158, 255);
    padding: 15px 10px;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
  }

  .reportModel .risk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    width: 90%;
  }

  .reportModel .risk .riskImg {
    height: 90px;
    margin-top: 10px
  }

  .reportModel .hit {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    width: 90%;
  }

  .reportModel .hit .hitContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
  }

  .reportModel .searchTime {
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
  }

  .reportModel .searchTime .timeItem {
    background-color: rgba(0, 130, 240, 0.1);
    color: rgb(0, 130, 240);
    height: 30px;
    border-radius: 8px;
    width: 18%;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
  }

  .reportModel .searchTime .timeItemActive {
    background: #3889ff !important;
    color: white !important;
  }

  .reportModel .searchContent {
    display: flex;
    flex-direction: column;
    width: 90%;
  }

  .reportModel .searchContent .searchTitle {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    position: relative;
    z-index: 10;
    margin: 15px 0;
  }

  .reportModel .searchContent .searchHr {
    position: absolute;
    bottom: 0;
    width: 100px;
    background: #0066ef;
    opacity: .28;
    height: 6px;
  }

  .reportModel .searchContent .searchp {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    padding: 15px 0;
    border-bottom: 0.5px solid #eee;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .reportModel .reportTable {
    padding: 10px 10px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .reportModel .reportTable .tableTitle {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .reportModel .searchContent .searchName {
    color: rgb(250, 100, 0) !important;

    font-size: 12px;
    color: #999;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .reportModel .content {
    font-size: 14px;
    color: rgb(153, 153, 153);
    margin-bottom: 0px;
    margin: 15px 0;
    width: 90%;
  }

  .xm {
    margin-bottom: 12px;

    .ajbt {
      margin: 8px 5px 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 13px;
    }

    .last {
      padding-bottom: 4px;
    }
  }
</style>
